docs homepage and components #4083
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📖 Docs PR preview links |
jsundai
changed the title
…poralio/documentation into docs-landing-homepage-update
There was a problem hiding this comment.
Pull request overview
This PR updates the documentation homepage by replacing the old Intro component with a new HomePageHero component and removes outdated styling elements.
Changes:
- Replaced the existing homepage intro component with a new hero section featuring quickstart links, action cards, and community cards
- Added new CSS styling for the homepage hero component and updated existing custom CSS with new color variables
- Created
SdkLogosAsBlockscomponent to display SDK logos in block format
Reviewed changes
Copilot reviewed 7 out of 26 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/css/homepage-hero.css | New CSS file defining styles for the homepage hero component with responsive design and theme support |
| src/css/custom.css | Added new color variables and normalized quote styles in font-face declarations |
| src/components/index.js | Exported the new HomePageHero component |
| src/components/elements/SdkLogosAsBlocks.js | New component to render SDK logos as clickable blocks |
| src/components/elements/SdkLogos.js | Updated image path for Go SDK logo and normalized quote styles |
| src/components/elements/HomePageHero.js | New homepage hero component with action cards, quickstart links, and community cards |
| docs/index.mdx | Replaced Intro component with HomePageHero and updated page metadata |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| alt: "Go lang logo", | ||
| class: "w-10 h-8", | ||
| link: '/develop/go', | ||
| image: '/img/sdks/svgs/golang-block.svg', |
There was a problem hiding this comment.
The Go SDK logo image path has been changed to 'golang-block.svg', but this appears inconsistent with the other SDK logos which still use their non-block variants (e.g., 'java.svg', 'python.svg'). This should either use '/img/sdks/svgs/golang.svg' to match the other SDKs, or all SDKs should be updated to use the block variant.
| image: '/img/sdks/svgs/golang-block.svg', | |
| image: '/img/sdks/svgs/golang.svg', |
| <div className="action-icon">{card.icon}</div> | ||
| <div className="action-content"> | ||
| <h3>{card.title}</h3> | ||
| <p dangerouslySetInnerHTML={{ __html: card.description }}></p> |
There was a problem hiding this comment.
Using dangerouslySetInnerHTML with user-controlled or externally sourced content can expose the application to XSS attacks. While the current descriptions appear to be hardcoded strings, consider using React components or a sanitization library to render HTML safely, especially if these descriptions might be sourced from external data in the future.
| <div key={index} className="community-card"> | ||
| <div className="community-icon">{card.icon}</div> | ||
| <h3>{card.title}</h3> | ||
| <p dangerouslySetInnerHTML={{ __html: card.description }}></p> |
There was a problem hiding this comment.
Using dangerouslySetInnerHTML with user-controlled or externally sourced content can expose the application to XSS attacks. While the current descriptions appear to be hardcoded strings, consider using React components or a sanitization library to render HTML safely, especially if these descriptions might be sourced from external data in the future.
| const quickstartLinks = [ | ||
| { | ||
| path: '/develop/go/set-up-your-local-go', | ||
| name: 'Go Quickstart', | ||
| }, | ||
| { | ||
| path: '/develop/java/set-up-your-local-java', | ||
| name: 'Java Quickstart', | ||
| }, | ||
| { | ||
| path: '/develop/python/set-up-your-local-python', | ||
| name: 'Python Quickstart', | ||
| }, | ||
| { | ||
| path: '/develop/typescript/set-up-your-local-typescript', | ||
| name: 'TypeScript Quickstart', | ||
| }, | ||
| { | ||
| path: '/develop/dotnet/set-up-your-local-dotnet', | ||
| name: '.NET Quickstart', | ||
| }, | ||
| { | ||
| path: '/develop/ruby/set-up-local-ruby', | ||
| name: 'Ruby Quickstart', | ||
| }, | ||
| ]; | ||
|
|
There was a problem hiding this comment.
The quickstartLinks array is defined but never used in the component. This creates dead code that should either be removed or implemented in the UI if intended for future use.
| const quickstartLinks = [ | |
| { | |
| path: '/develop/go/set-up-your-local-go', | |
| name: 'Go Quickstart', | |
| }, | |
| { | |
| path: '/develop/java/set-up-your-local-java', | |
| name: 'Java Quickstart', | |
| }, | |
| { | |
| path: '/develop/python/set-up-your-local-python', | |
| name: 'Python Quickstart', | |
| }, | |
| { | |
| path: '/develop/typescript/set-up-your-local-typescript', | |
| name: 'TypeScript Quickstart', | |
| }, | |
| { | |
| path: '/develop/dotnet/set-up-your-local-dotnet', | |
| name: '.NET Quickstart', | |
| }, | |
| { | |
| path: '/develop/ruby/set-up-local-ruby', | |
| name: 'Ruby Quickstart', | |
| }, | |
| ]; |
|
Going to merge this and we can address the comments and do some refactoring in follow up PRs on Monday. |
What does this PR do?
removes outdated items.
Notes to reviewers